import BaseComponent from "../../../pages/BaseComponent";
import {Progress, View} from "@tarojs/components";
import {observable} from "mobx";
import "./index.less";

export default class extends BaseComponent {

  @observable progressValue = 50;

  render() {

    const {progress} = this.props;
    if (!progress)
      this.progressValue = 50;
    else
      this.progressValue = progress;

    const progressProps = {
      strokeWidth: 15, percent: this.progressValue, borderRadius: 10, activeColor: '#F5C548',
      backgroundColor: '#323337', showInfo: false
    };

    let value = this.progressValue - 7;
    if (value < 0)
      value = 0;

    return (
      <View className='progress_group'>
        <Progress {...progressProps} className='progress'/>
        <View className='progress_text' style={{left: value + '%'}}>{this.progressValue + '%'}</View>
      </View>
    );
  }
}
